<template>
  <div class="app-container">
    <h2>支付结果</h2>
    <el-result
      :icon="status === 'success' ? 'success' : 'error'"
      :title="status === 'success' ? '支付成功' : '支付失败'"
      :sub-title="'订单编号: ' + orderNumber"
    >
      <template #extra>
        <el-button type="primary" @click="goHome">返回首页</el-button>
      </template>
    </el-result>
  </div>
</template>

<script>
import { getOrderStatus } from '@/api/pay'

export default {
  name: 'PayResult',
  data() {
    return {
      orderNumber: this.$route.query.orderNumber,
      status: ''
    }
  },
  created() {
    this.fetchOrderStatus()
  },
  methods: {
    async fetchOrderStatus() {
      const response = await getOrderStatus(this.orderNumber)
      this.status = response.status === 'PAID' ? 'success' : 'error'
    },
    goHome() {
      this.$router.push('/pay')
    }
  }
}
</script>
